今天，我們要來學習 GitHub Pages !!
這篇將會了解 GitHub Pages 的用途，
並學會在 Repo 中啟用 Pages，
最後建立一個簡單的首頁（index.html 或 README.md）。

什麼是 GitHub Pages？

GitHub Pages 是 GitHub 提供的免費靜態網站託管服務，
寫好了專案之後，我們通常會需要一台 Server 上傳我們的網站。
如果只是很單純的 html、js、css，那麼你可以使用 Github Pages 。
不過，如果沒有寫好專案，
第一次也能直接在Github上撰寫 html、js、css!!

總而言之，他讓你只需要一個 Repo 就能建立網站，網址會是：
https://<你的GitHub帳號>.github.io/<Repo名稱>

你可以用它來做個人作品集網站、專案文件說明或是部落格!
我們這次就是要來建立一個專屬於自己的 GitHub Pages。

實作流程

步驟 1：建立專案
首先到 GitHub 建立一個新 Repo，
記得打勾 Add a README file。

步驟 2：新增首頁
我們在電腦本地端 clone 下來：
(小複習:git clone 是用來把整個遠端 Repo 複製到本地端喔~)

git clone https://github.com/你的帳號/專案名稱
cd 專案名稱

接下來我們就可以建立一個 index.html 檔案，
內容簡單就好!!
要注意的是，我們不是直接在GitHub上新增檔案!而是由本端機進行操作。
我們先在本地端透過指令新增檔案。

接下來我們順著路徑在電腦資料夾找到這個檔案，
並對內容進行編輯，這裡就可以使用html的格式進行設計。

最後我們把它推上 GitHub：

git add index.html
git commit -m "Add index.html"
git pull origin main
git push origin main #之後就只要push就好

步驟 3：啟用 GitHub Pages
回到 GitHub Repo 頁面，點上方選單 Settings。
左邊選單找到 Pages（有時在「Code and automation」底下），
在 Source 選擇：

• Branch → main
• Folder → /root（根目錄）

點 Save。

步驟 4：訪問網站
GitHub Pages 需要 1–2 分鐘建置。

之後會出現一個網址，點開就能看到你的網站啦，完成Github pages設置!!

小挑戰

我們再前面成功建立了網頁，
現在我們要試著加入一張圖片看看!!

加入圖片的方式有兩種:

• 方式 A：使用網路圖片（複製網址)
• 方式 B：自己上傳圖片到 Repo

這次我們用方法B來實作~
首先在 Repo 建一個資料夾 images，
把圖片放進去，名稱例如 first.jpg。

在 index.html 加入：

做完修改，我們需要再次提交 index.html，
並推送到 GitHub 上，
記住，我們新增的圖片也要做提交，不然就看不到囉!

回到 GitHub Pages，帶網站部屬成功，就可以看到圖片了!!

以上是今天的學習，
因為是基礎學習，網頁就做得比較簡陋，
有興趣想做得漂亮的邦友，可以去研究css和js囉XD